UI Development with Chakra UI Vue — Statistics Display

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Statistics Component

Chakra UI Vue comes with a component to display statistics.

To use it, we write:

<template>
  <c-box>
    <c-stat>
      <c-stat-label>Collected Fees</c-stat-label>
      <c-stat-number>$500.00</c-stat-number>
      <c-stat-helper-text>Jan 12 - Jan 28</c-stat-helper-text>
    </c-stat>
  </c-box>
</template>

<script>
import { CBox, CStat, CStatLabel, CStatNumber } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
  },
};
</script>

We add the c-stat component to add the statistics container.

c-stat-label is the label for the statistic.

c-stat-number is the container for the statistic number.

c-stat-helper-text is the container for the helper text.

We can add a group of statistics with the c-stat-group component:

<template>
  <c-box>
    <c-stat-group>
      <c-stat>
        <c-stat-label>Sent</c-stat-label>
        <c-stat-number>676585</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="increase" />
          30.60%
        </c-stat-helper-text>
      </c-stat>
      <c-stat>
        <c-stat-label>Clicked</c-stat-label>
        <c-stat-number>45</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="decrease" />
          -5.20%
        </c-stat-helper-text>
      </c-stat>
    </c-stat-group>
  </c-box>
</template>

<script>
import {
  CBox,
  CStat,
  CStatLabel,
  CStatNumber,
  CStatHelpText,
  CStatArrow,
  CStatGroup,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
    CStatHelpText,
    CStatArrow,
    CStatGroup,
  },
};
</script>

We wrap c-stat-group from multiple c-stat components.

Also, we add the c-stat-arrow component to add arrows for increases and increases, which are set by the type prop.

Conclusion

We can a statistic display with Chakra UI Vue.